<template>
    <div class="user-bg" :style="{ height: CSystem.customBarHeightRpx + 350 + 'rpx' }">
        <div class="column" :style="{ paddingTop: CSystem.customBarHeight + 'px' }" style="color: #fff">
            <div class="row items-center" style="padding-left: 30rpx; padding-right: 60rpx">
                <div class="col row" @click="login">
                    <image
                        :src="
                            CUser.info.avatarUrl ??
                            'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'
                        "
                        style="width: 150rpx; height: 150rpx; border-radius: 75rpx"
                    ></image>
                    <div class="column justify-center" style="margin-left: 20rpx; font-size: 36rpx">
                        <div>{{ CUser.info.id ? CUser.info.nickName : '立即登录' }}</div>
                        <div style="font-size: 26rpx; margin-top: 20rpx; height: 26rpx">
                            <div v-if="!CUser.info.id">登录体验更多功能</div>
                        </div>
                    </div>
                </div>
                <div style="width: 100rpx"></div>
            </div>
            <div class="row flex-center" style="margin-top: 60rpx">
                <div class="column flex-center top-card-item">
                    <div>0</div>
                    <div>余额</div>
                </div>
                <div style="height: 60rpx">
                    <s-line y />
                </div>
                <div class="column flex-center top-card-item">
                    <div>0</div>
                    <div>积分</div>
                </div>
                <div style="height: 60rpx">
                    <s-line y />
                </div>
                <div class="column flex-center top-card-item" @click="toDiscounts">
                    <div>0</div>
                    <div>优惠券</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import CLogin from '~/store/CLogin'
import CSystem from '~/store/CSystem'
import CUser from '~/store/CUser'
import System from '~/utils/System'

const login = () => {
    if (System.checkLogin(true, false)) {
        System.navigateTo('/login')
    } else {
        System.navigateTo('/user/info', true)
    }
}

const toDiscounts = () => {
    CLogin.dialog.content = '登录后可查看优惠券，请登录'
    System.navigateTo('/user/discounts', true)
}
</script>
<style lang="less" scoped>
.user-bg {
    background: linear-gradient(#f05848, #e1251b);
}
</style>
